﻿@page "/chat"
@attribute [Authorize]
@layout EmptyLayout
@inject NavigationManager NavigationManager
@inject IChatApplicationService ChatApplicationService
@inject IPopupService PopupService

<style>
    .content-container {
        display: flex;
    }

    .left-column {
        width: 160px;
        min-width: 160px;
    }

    .middle-column {
        width: 220px;
        min-width:220px;
    }

    .right-column {
        flex-grow: 1;
    }

    .vertical-divider {
        width: 1px; /* 设置宽度为1px */
        background-color: #E0E0E0; /* 设置分割线颜色为黑色 */
        height: 100vh; /* 设置高度为100px，或者你想要的高度 */
        margin-left: 10px; /* 可选，设置左边距 */
        margin-right: 10px; /* 可选，设置右边距 */
    }
    html {
        overflow: hidden;
    }
</style>

<MAppBar Color="deep-purple accent-4"
         Dense
         Dark>
    <MButton Icon OnClick="ArrowLeft">
        <MIcon>mdi-arrow-left</MIcon>
    </MButton>

    <MToolbarTitle>对话</MToolbarTitle>

</MAppBar>

<div class="content-container ">
    <div class="left-column">
        <ChatApplicationList @bind-Value="chatApplication" ChatApplication="ChatApplications" />
    </div>
    <div style="width: 100%;height: 100%;display: flex; margin-right: 5px;">
        <div class="middle-column">
            <MCardTitle>
                @chatApplication.Name
            </MCardTitle>
            <MDivider></MDivider>
            <ChatDialog Type="ChatDialogType.ChatApplication" ApplicationId="@chatApplication.Id" @bind-Value="ChatDialog"></ChatDialog>
        </div>
        <div class="vertical-divider"></div>
        <div class="right-column">
            <ChatDialogue ChatDialogId="@ChatDialog.Id" ChatApplication="@chatApplication"></ChatDialogue>
        </div>
    </div>
</div>
